<template>
    <div>
        <el-card shadow="always"  class="centerWrap">
            <!-- 头部 -->
            <!-- 轮播图 -->
      
            <el-carousel  class="recommend" indicator-position="outside" height="466px">
              <el-carousel-item v-for="(item,index) in carouselList" :key="item.id" >
                <a :href="item.link">
                  <img :src="item.appAdvertiseUrl" alt="" />
                </a> 
      
              </el-carousel-item>
            </el-carousel>
            </el-card>
    </div>
</template>

<script setup lang="ts">
import { onMounted ,ref} from "vue";
import {getCarousel} from '../../api/recommend/index'
// 存储轮播数据
const carouselList =ref([])
onMounted(() => {
  getRecommend();
});
const getRecommend = async() => {
  const result = await getCarousel()
  console.log(result);
  carouselList.value = result.data
  
};
</script>

<style scoped>
.centerWrap {
    /* width: 1200px; */
    margin: 10px auto 0;
  }
  
  .recommend {
    width: 1200px;
    margin: 15px auto;
  }
  .recommend img{
    width: 1200px;
    height: 460px;
  }
</style>